<script setup lang="ts">
import type { CascaderProps } from 'ant-design-vue';
import type { ShowSearchType } from 'ant-design-vue/es/cascader';

import { onMounted, reactive, ref } from 'vue';
import type { UnwrapRef } from 'vue';

import { get1688ShopCategory } from '#/api';

interface FormState {
  categoryIDs: string[];
  keyword: string;
  priceStart: number | string;
  priceEnd: number | string;
  filters: string[];
}
interface ProtderData {
  categoryId?: number | string | undefined;
  keyword?: string;
  priceStart?: number | string;
  priceEnd?: number | string;
  filters?: string;
}
interface Props {
  getYxGoods: (formState: ProtderData) => void;
}

const props = defineProps<Props>();

const formState: UnwrapRef<FormState> = reactive({
  categoryIDs: [],
  keyword: '',
  priceStart: '',
  priceEnd: '',
  filters: [],
});

function shearData() {
  formState.filters.push('jxhy');
  const queryData: ProtderData = {
    categoryId: formState.categoryIDs
      ? formState.categoryIDs[formState.categoryIDs.length - 1]
      : '',
    keyword: formState.keyword,
    priceStart: formState.priceStart,
    priceEnd: formState.priceEnd,
    filters: [...new Set(formState.filters)].join(','),
  };
  // for (const key in queryData) {
  //   if (!queryData[key]) {
  //     delete queryData[key];
  //   }
  // }
  props?.getYxGoods && props?.getYxGoods(queryData);
}

const options: any = ref<CascaderProps['options']>([]);

const loadData: CascaderProps['loadData'] = (selectedOptions) => {
  const targetOption = selectedOptions[selectedOptions.length - 1];
  if (!targetOption) return;
  targetOption.loading = true;
  // console.log('targetOption', targetOption);
  get1688types(targetOption.id).then((data) => {
    targetOption.loading = false;
    targetOption.children = data;
    options.value = [...options.value];
  });
};
const filter: ShowSearchType['filter'] = (inputValue, path) => {
  return path.some((option) =>
    option.label.toLowerCase().includes(inputValue.toLowerCase()),
  );
};
async function get1688types(id = 0) {
  const data = await get1688ShopCategory({ parentId: id });
  return data;
}
onMounted(async () => {
  const getData = await get1688types(0);
  // console.log('getData', getData);
  options.value = getData;
});
const fieldNames = {
  label: 'name',
  value: 'id',
  children: 'children',
};
</script>

<template>
  <div class="mb-10 p-4">
    <a-space class="w-full" direction="vertical" size="large">
      <!-- <div>icons</div> -->
      <div>
        <a-form :model="formState" layout="inline">
          <a-space class="w-full" direction="vertical" size="small">
            <a-space class="w-full">
              <a-form-item class="w-96" label="选择类目">
                <a-cascader
                  v-model:value="formState.categoryIDs"
                  :field-names="fieldNames"
                  :load-data="loadData"
                  :options="options"
                  :show-search="{ filter }"
                  change-on-select
                  placeholder="选择类目"
                  style="max-width: 300px"
                />
              </a-form-item>
              <a-form-item class="w-96" label="关键词" name="keyword">
                <a-input
                  v-model:value="formState.keyword"
                  class="w-70"
                  placeholder="请输入商品名称或关键词搜索"
                  style="max-width: 300px"
                />
              </a-form-item>

              <a-form-item class="w-96" label="价格区间">
                <a-input-group compact>
                  <a-input-number
                    v-model:value="formState.priceStart"
                    :min="0.01"
                    placeholder="最低价"
                    style="width: 100px; text-align: center"
                  />
                  <a-input
                    class="site-input-split"
                    disabled
                    placeholder="~"
                    style="width: 30px; pointer-events: none; border-left: 0"
                  />
                  <a-input-number
                    v-model:value="formState.priceEnd"
                    :min="0.01"
                    class="site-input-right"
                    placeholder="最高价"
                    style="width: 100px; text-align: center"
                  />
                </a-input-group>
              </a-form-item>
            </a-space>
            <a-space class="w-full">
              <a-form-item class="w-full" label="特征" name="filters">
                <a-checkbox-group
                  v-model:value="formState.filters"
                  class="w-full"
                  style="width: 100%"
                >
                  <a-row>
                    <a-col>
                      <a-checkbox value="isOnePsaleFreePost">包邮</a-checkbox>
                    </a-col>
                    <a-col>
                      <a-checkbox value="isOnePsale">一件代发</a-checkbox>
                    </a-col>
                    <a-col>
                      <a-checkbox value="dyCiphertext">
                        支持抖音密文下单
                      </a-checkbox>
                    </a-col>
                    <a-col>
                      <a-checkbox value="noReason7DReturn">
                        7天无理由包退
                      </a-checkbox>
                    </a-col>
                    <a-col>
                      <a-checkbox value="shipIn48Hours">
                        48小时发货商品
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
              </a-form-item>

              <a-form-item>
                <a-button type="primary" @click="shearData">查询</a-button>
              </a-form-item>
            </a-space>
          </a-space>
        </a-form>
      </div>
    </a-space>
  </div>
</template>
